import React from 'react'
import { connect } from 'react-redux'
import {messages} from "share/common";
import { Button, Table, Input, Tooltip, Popover} from 'antd';
const Search = Input.Search;
import CityGroupService from 'containers/setting/city-group/city-group.service';
import 'styles/setting/city-group/city-group-allot-company.scss';
import 'styles/setting/city-group/city-group-info/city-group-detail.scss';
import BasicInfo from 'components/basic-info'
import ResizeTable from "components/resize-table";

class CityGroupDetail extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      data: [],
      columns: [
        {title: messages('setting.key190'/*国家*/), dataIndex: 'country'},
        {title: messages('setting.key2028')/*地点名称*/, dataIndex: 'vendorAlias'},
        {title: messages('setting.key2029')/*地点编码*/ /* 国家*/, dataIndex: 'code'},
        {title: messages('setting.key2030')/*地点类型*/, width: '7%', dataIndex: 'typeName'},
        {title: messages('setting.key2031')/*地点级别*/, width: '7%', dataIndex: 'levelId'},
        {title: messages('setting.key2032')/*路径*/, dataIndex: 'path'},
      ],
      pagination:{
        total: 0,
        page: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      selectedRowKeys: [],
      record: {},//选择某一行进行编辑时的当前行
      visible: false,
      levelOID: this.props.levelOID,
      key: this.props.key,
      keyword: '',
      infoData: {
        levelName: '',
        code: '',
        desc: '',
      },
      infoList: [
        { type: 'input', id: 'levelName', disabled: true, label: messages('setting.key197'/*名称*/) }, /*名称*/
        { type: 'input', id: 'code', disabled: true, label: messages('setting.key198'/*编码*/) }, /*编码*/
        { type: 'input', id: 'comment', disabled: true, label: messages('setting.key199'/*描述*/)}, /*描述*/
      ],
    };
  }

  componentWillMount () {
    this.searchGroupCity();
    this.getCityGroupDetail();
  };

  componentWillReceiveProps (nextProps) {
    if(nextProps.activeKey === messages('setting.key200'/*详细信息*/)){
      this.searchGroupCity();
      this.getCityGroupDetail();
    }
  }

  getCityGroupDetail = () => {
    CityGroupService.getCityGroupDetail(this.state.levelOID).then(res => {
      this.setState({
        infoData: res.data,
      })
    }).catch(err => {

    })
  };

  //删除城市组下的城市
  deleteCityGroupCity = () => {
    const {selectedRowKeys, levelOID} = this.state;
    CityGroupService.deleteCityGroupCity(selectedRowKeys, levelOID, false).then(
      res => {
        if(res.status === 200){
          this.searchGroupCity();
          this.setState({
            selectedRowKeys: [],
          })
        }
      }
    )
  };

  //列表选择更改
  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys })
  };

  //输入框里的搜索
  inputSearch = (value) => {
    let {pagination} = this.state;
    pagination.page = 0;
    pagination.pageSize = 10;
    this.setState({
      keyword: value,
      pagination,
    }, () => {
      this.searchGroupCity();
    })
  };

  //搜索城市组里的城市
  searchGroupCity = () => {
    const {levelOID, keyword} = this.state;
    let {pagination} = this.state;
    this.setState({
      loading: true,
    });
    CityGroupService.searchGroupCity(levelOID, keyword, pagination.page, pagination.pageSize).then(res => {
          pagination.total = Number(res.headers['x-total-count']);
          pagination.current = this.state.pagination.page + 1;
          this.setState({
            data: res.data,
            loading: false,
            pagination,
          });
      }
    ).catch(err => {
      this.setState({
        loading: false,
      })
    })
  };


  //分页点击
  onTableChange = (pagination1) => {
    let { pagination} = this.state;
    pagination.page = pagination1.current - 1;
    pagination.pageSize = pagination1.pageSize;
    pagination.total = pagination1.total;
    this.setState({
      pagination,
    }, () => {
      this.searchGroupCity();
    });
  };

  render () {
    const {data, columns, pagination, loading, selectedRowKeys, infoList, infoData} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return(
      <div className={'city-group-info-detail'}>
        <BasicInfo
          infoList={infoList}
          infoData={infoData}
          updateState={false}
          isHideEditBtn={true}
          updateHandle={this.getCityGroupDetail}
          loading={loading}
        />
        <br/>
        <div>
          <Button onClick={this.deleteCityGroupCity} disabled={!selectedRowKeys.length || !data.length}>
            {messages('setting.key201'/*移除城市*/)}
          </Button>
          <div style={{float: 'right'}}>
            <Search
              placeholder={messages('common.please.enter')/*请输入*/}
              onSearch={this.inputSearch}
              style={{width: 300}}
              enterButton
            />
          </div>
        </div>
        <br/>
        <div>
          <ResizeTable
            bordered
            loading={loading}
            size={'middle'}
            rowKey={'code'}
            dataSource={data}
            columns={columns}
            pagination={pagination}
            onChange={this.onTableChange}
            rowSelection={rowSelection}
          />
        </div>
      </div>
    )
  };
}

CityGroupDetail.propTypes = {
  parentMessage: React.PropTypes.any,  //传到父组件
};

CityGroupDetail.contextTypes = {
  router: React.PropTypes.object,
};
function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode,
    language: state.main.language,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(CityGroupDetail);
